<div data-ng-controller="SaleController">
    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                        aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <form class="navbar-form navbar-right">
                    <input type="text" class="form-control" placeholder="Tìm mặt hàng..." ng-model="query">
                </form>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Xem báo cáo</a></li>
                    <li><a href="#">Nhập trả hàng</a></li>
                    <li><a href="#">Lập phiếu thu</a></li>
                    <li><a href="#">Quản lý</a></li>
                    <li><a href="#">Đăng xuất</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-9" style="height: 300px; overflow-y: scroll">
                <table class="table table-bordered" >
                    <tr>
                        <th>STT</th>
                        <th>Mã sản phẩm</th>
                        <th>Tên sản phẩm</th>
                        <th>Giá thành</th>
                        <th>Số lượng</th>
                        <th>Tổng</th>
                        <th>Xóa</th>
                    </tr>
                    <tr data-ng-repeat="product in selectedProducts">
                        <td>{{$index + 1}}</td>
                        <td>{{ product.maSanPham }}</td>
                        <td>{{ product.tenSanPham }}</td>
                        <td>
                            <input type="text" ng-init="giaThanh=product.giaThanh" ng-model="giaThanh">
                        </td>
                        <td>
                            <input type="text" ng-init="soLuong=product.soLuong" ng-model="soLuong">
                        </td>
                        <td>
                            {{ giaThanh * soLuong }}
                        </td>
                        <td>
                            <a data-ng-click="removeProduct($index)" class="btn btn-primary"><span class="glyphicon glyphicon-remove"></span></a>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="col-md-3">
                <div class="col-md-10">
                    <input type="text" class="form-control" ng-model="selected" typeahead="state for state in states | filter:$viewValue | limitTo:8" placeholder="Tìm khách hàng">
                </div>
                <div class="col-md-2">
                    <a class="btn btn-primary" href="#"><span
                            class="glyphicon glyphicon-plus"></span></a>
                </div>
                <hr>
                <div class="col-md-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">Hóa đơn</div>
                        <div class="panel-body">
                            <table class="table">
                                <tbody>
                                    <tr>
                                        <td>Tổng tiền hàng</td>
                                        <td>123.000</td>
                                    </tr>
                                    <tr>
                                        <td>Giảm giá</td>
                                        <td>0</td>
                                    </tr>
                                    <tr>
                                        <td>Khách cần trả</td>
                                        <td>123.000</td>
                                    </tr>
                                    <tr>
                                        <td>Tiền khách hàng trả</td>
                                        <td>123.000</td>
                                    </tr>
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td>Tiền trả khách hàng</td>
                                        <td>0</td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="col-sm-6 col-md-1" ng-repeat="product in products | filter:query | orderBy:orderDefault">
                    <div class="thumbnail">
                        <img data-ng-click="addToCart(product)" alt="100%x200" src="" data-holder-rendered="true" style="height: 100%; width: 100%; display: block;">
                        <div class="caption">
                            <p>{{product.tenSanPham}} - {{product.giaThanh}}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="<?php echo base_url('assets/angularjs/angular.min.js'); ?>"></script>
<script src="<?php echo base_url('assets/angularjs/ui-bootstrap-tpls-0.12.0.min.js'); ?>"></script>
<script src="<?php echo base_url('assets/js/sales/controllers.js'); ?>"></script>